.rt-gcp-container {
  flex: 1;
  background-color: #F8F8F8;
  .rt-gc-box {
    margin: 0 20px 20px; // 上 左－右 下
    border-bottom: 12px solid #F67363;
    background: url(../../statics/images/wave.png) repeat-x #f7f7f7;
    display: flex;
    justify-content: space-between;
    padding: 0 28px;
    height: 196px;
    .rt-left-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      & > span {
        &:first-child {
          color: #F67363;
          font-size: 32px;
        }
        &:last-child {
          color: #7B7B7B;
          font-size: 24px;
          padding: 20px 0;
        }
      }
    }
    .rt-right-box {
      display: flex;
      align-items: center;
      .rt-wrapper-box {
        display: flex;
        align-items: baseline;
        & > span {
          color: #F67363;
          &:first-child {
            font-size: 36px;
            padding-right: 20px;
          }
          &:last-child {
            font-size: 72px;
            font-weight: bold;
          }
        }
      }
    }
  }
  .rt-gc-box-grey {
    background: url(../../statics/images/wave-grey.png) repeat-x #f3f3f3;
    border-bottom-color: #E6E6E6;
    span {
      color: #8C8C8C !important;
    }
    .rt-left-box > span:last-child {
      & > span:last-child {
        color: #808080 !important;
      }
    }
  }
}

.rt-splash-container {
  flex: 1;
  display: flex;
  img {
    flex: 1;
    // height: 100%; // 这种兼容性要好于 flexbox 实现
    // width: 100%;
  }
}

.rt-register-container {
  @paddingVertical: 20px;
  flex: 1;
  .rt-account-info-box {
    display: flex;
    justify-content: space-between;
    padding: 10px @paddingVertical;
    padding-top: 20px;
    align-items: center;
    .rt-user-info {
      display: flex;
      & > span {
        display: flex;
        align-items: center;
        padding-left: 20px;
        color: #555555;
      }
    }
    .rt-unbind-btn {
      color: #fff;
      background-color: @color-primary;
      padding: 6px 26px;
      border-radius: 6px;
    }
  }
  .rt-captcha-box {
    position: relative;
  }
  .rt-agreement-protocol-box {
    padding: 30px 2.8%;
    display: flex;
    align-items: center;
    .rt-circle-box {
      border: 1px solid @color-secondary;
      height: 30px;
      width: 30px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .rt-normal-text {
      color: #464646;
      font-size: 24px;
      padding-left: 8px;
    }
    .rt-protocol-link-text {
      color: @color-secondary;
    }
  }
}

.rt-agreement-container {
  & > p {
    color: #7B7B7B;
    padding: 0 24px;
    text-indent: 2em;
    &:first-child {
      text-align: center;
      color: #555555;
      font-size: 32px;
    }
  }
}

.rt-forget-password-container {
  flex: 1;
}

.rt-notice-list-container {
  flex: 1;
  .rt-notice-box {
    border-bottom: 1px solid #EFEFEF;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    &:last-child {
      margin-bottom: 20px;
    }
    & > div {
      & > span {
        &:first-child {
          color: #555555;
          font-size: 28px;
          padding: 10px 0;
        }
        &:last-child {
          color: #7B7B7B;
          font-size: 20px;
          padding: 4px 0;
          padding-top: 10px;
        }
      }
      &:first-child {
        display: flex;
        flex-direction: column;
      }
      &:last-child {
        align-self: flex-end;
        color: @color-secondary;
        font-size: 24px;
      }
    }
  }
}

.rt-notice-detail-container {
  border: 1px solid red;
  flex: 1;
  color: #7B7B7B;
  .rt-notice-title {
    // border: 1px solid red;
    text-align: center;
    color: #474E5D;
    font-size: 40px;
    padding: 20px 0;
  }
  .rt-notice-datetime {
    // border: 1px solid red;
    text-align: center;
    padding: 10px 0;
    font-size: 24px;
  }
  p {
    // border: 1px solid red;
    // border: 1px solid green;
    padding: 0 22px;
    text-indent: 2em;
    font-size: 28px;
  }
}

.rt-central-disc-container {
  flex: 1;
  .rt-notice-carousel {
    border-bottom: 1px solid @color-ashy;
    background-color: #F8F8F8;
    font-size: 24px;
    display: flex;
    align-items: center;
    height: 52px;
    position: absolute;
    width: 100%;
    & > span {
      &:first-child {
        background-color: @color-primary;
        color: #fff;
        padding: 6px 10px;
        border-radius: 6px;
        margin-left: 2%;
      }
      &:last-child {
        color: #555555;
        padding-left: 20px;
      }
    }
  }
  .rt-goods-price-box {
    background-color: #fff;
    position: absolute;
    top: 54px;
    width: 100%;
    display: flex;
    height: 96px;
    .rt-inner-box {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      .rt-goods-name {
        font-size: 32px;
        color: @color-primary;
        padding-right: 6px;
        &.rt-font-color {
          color: #6E6E6E !important;
        }
      }
      .rt-goods-price {
        color: @color-red;
        font-size: 36px;
        padding: 0 4px;
        &.rt-font-color {
          color: @color-green;
        }
      }
      i {
        color: @color-red;
        &.rt-font-color {
          color: @color-green;
        }
      }
      &.rt-active-box {
        border-bottom: 4px solid @color-primary;
      }
    }
  }
  .rt-price-statistics-box {
    border-top: 1px solid @color-ashy;
    margin-top: 149px;
    padding: 18px 0;
    display: flex;
    justify-content: space-around;
    font-size: 24px;
    color: #474E5D;
    background-color: #F8F8F8;
  }
  .rt-chart-genre-box {
    border: 1px solid #EFEFEF;
    display: flex;
    color: #555555;
    font-size: 24px;
    & > span {
      flex: 1;
      text-align: center;
      padding: 14px 0;
    }
    .rt-active-genre {
      color: @color-primary;
      border-bottom: 2px solid;
    }
  }
  .rt-chart-img {
    max-width: 99.6%;
    width: 100%;
    border: 1px solid green;
  }
  .rt-account-recharge-cash-box {
    border: 1px solid #EFEFEF;
    padding: 14px;
    justify-content: space-between;
    display: flex;
    font-size: 24px;
    color: #555555;
    .rt-account-box {
      display: flex;
      align-items: center;
      i {
        color: @color-primary;
        font-size: 40px;
        padding-right: 6px;
      }
      .rt-balance {
        color: @color-primary;
        font-size: 28px;
        padding: 0 14px;
      }
    }
    .rt-rechart-cash-box {
      display: flex;
      i {
        color: @color-primary;
        font-size: 40px;
        padding-left: 20px;
      }
      span {
        padding-left: 10px;
      }
    }
  }
  .rt-available-goods-box {
    display: flex;
    justify-content: space-around;
    justify-content: space-between;
    padding: 20px 3%;
    background-color: #F8F8F8;
    .rt-goods {
      border: 1px solid #EFEFEF;
      display: flex;
      flex-direction: column;
      color: #555555;
      background-color: #fff;
      padding: 20px 40px;
      justify-content: center;
      align-items: center;
      border-radius: 8px;
      position: relative;
      & > span {
        font-size: 20px;
        &:nth-child(2) {
          font-size: 32px;
          padding: 8px 0;
        }
      }
      .rt-corner-box {
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
    .rt-active-goods {
      color: @color-primary;
      border-color: @color-primary;
      .rt-adjust-tick {
        height: 4px;
        width: 10px;
      }
    }
  }
  .rt-operation-btn-grp {
    font-size: 28px;
    display: flex;
    justify-content: space-between;
    padding: 0 3%;
    color: #fff;
    & > div {
      background-color: #CCCCCC;
      width: 48%;
      padding: 20px 0;
      text-align: center;
      border-radius: 8px;
      i {
        font-size: 40px;
      }
    }
  }
  .rt-tip-msg-box {
    text-align: center;
    padding: 18px;
    font-size: 24px;
    color: #7B7B7B;
  }
  .rt-auth-btn-box {
    display: flex;
    justify-content: center;
    margin-bottom: 156px;
    & > div {
      padding: 16px 48px;
      border-radius: 8px;
      background-color: @color-primary;
      font-size: 28px;
      color: #fff;
    }
  }
}

.rt-make-position-container {
  flex: 1;
  color: #555555;
  font-size: 24px;
  background-color: @color-background;
  .rt-confirmation-box {
    border-bottom: 1px solid #EFEFEF;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    .rt-left-box {
      display: flex;
      flex-direction: column;
      & > span {
        font-size: 28px;
        padding: 10px 0;
      }
      & > div {
        display: flex;
        padding: 10px 0;
        .rt-price {
          font-size: 44px;
          color: @color-red;
          font-weight: bold;
        }
      }
    }
    .rt-right-box {
      display: flex;
      align-items: center;
      .rt-padding-top {
        padding-top: 16px;
      }
      & > span {
        padding: 12px;
        background-color: @color-red;
        color: #fff;
        border-radius: 6px;
      }
      & > div {
        padding: 8px 0;
        padding-left: 16px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        &:last-child {
          color: #393A3F;
        }
      }
    }
  }
  .rt-account-info-box {
    border-bottom: 1px solid #EFEFEF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    & > div {
      color: #555555;
      &:first-child {
        font-size: 28px;
        & > span:last-child {
          color: @color-primary;
          padding-left: 48px;
        }
      }
      &:last-child {
        font-size: 24px;
        & > i {
          font-size: 40px;
          color: @color-primary;
        }
      }
    }
  }
  .rt-lots-box {
    border-bottom: 1px solid #EFEFEF;
    display: flex;
    font-size: 28px;
    color: #555555;
    & > span {
      padding-top: 24px;
      width: 11%;
      text-align: center;
    }
    & > div {
      width: 89%;
      padding: 12px 0;
      & > div {
        display: flex;
        & > span {
          flex: 1;
          border: 1px solid #EFEFEF;
          padding: 32px 8px;
          margin: 12px;
          text-align: center;
          border-radius: 8px;
          position: relative;
          background-color: #fff;
          .rt-corner-box {
            position: absolute;
            bottom: 0;
            right: 0;
            .rt-adjust-tick {
              height: 4px;
              width: 10px;
            }
          }
          &.rt-active-lots {
            color: @color-primary;
            border-color: @color-primary;
          }
        }
      }
    }
  }
  .rt-stepper-box {
    border-bottom: 1px solid @color-ashy;
    padding: 10px 22px 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    & > span {
      font-size: 28px;
      color: @color-font-primary;
    }
    .rt-stepper {
      font-size: 30px;
      color: @color-font-secondary;
      display: flex;
      align-items: center;
      .rt-delta-operation {
        border: 1px solid @color-ashy;
        border-radius: 8px;
        background-color: #fff;
        display: flex;
        align-items: center;
        & > span {
          padding: 10px 36px;
        }
        .rt-operator {
          font-size: 40px;
          color: @color-font-primary;
          padding: 10px 26px;
          &:first-child {
            border-right: 1px solid @color-ashy;
          }
          &:last-child {
            border-left: 1px solid @color-ashy;
          }
          &.rt-active-left {
            background-color: @color-primary;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
            color: #fff;
          }
          &.rt-active-right {
            background-color: @color-primary;
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
            color: #fff;
          }
        }
      }
      & > span {
        padding-left: 10px;
      }
    }
  }
  .rt-switch-box {
    border-bottom: 1px solid @color-ashy;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    .rt-left-text {
      font-size: 28px;
      color: @color-font-primary;
      .rt-extra-info {
        font-size: 24px;
        padding-left: 10px;
      }
    }
    .rt-deferred-charges {
      font-size: 24px;
      padding-right: 16px;
    }
  }
  & > div:nth-last-child(2) {
    margin-bottom: 100px;
  }
}

.rt-finance-container {
  flex: 1;
  background-color: @color-background;
  overflow: auto;
  .rt-news-list {
    background-color: #fff;
    font-size: 24px;
    .rt-news {
      border-bottom: 1px solid @color-ashy;
      .rt-title-box {
        padding: 18px;
        padding-bottom: 6px;
        display: flex;
        align-items: center;
        .rt-tag {
          padding: 6px 10px;
          border-radius: 8px;
          color: #fff;
          &.rt-tag-important {
            background-color: @color-red;
          }
          &.rt-tag-latest {
            background-color: @color-primary;
          }
          &.rt-tag-hot {
            background-color: #FF9C32;
          }
        }
        & > span {
          &:last-child {
            font-size: 32px;
            color: @color-font-primary;
            padding-left: 16px;
          }
        }
      }
      .rt-content {
        color: @color-font-secondary;
        padding: 12px 16px;
      }
      .rt-datetime-orign-box {
        display: flex;
        justify-content: space-between;
        padding: 14px 18px;
        padding-top: 6px;
        & > span {
          &:first-child {
            color: @color-font-secondary;
          }
          &:last-child {
            color: #CCCCCC;
          }
        }
      }
      &:last-child {
        margin-bottom: 140px;
      }
    }
  }
  .rt-data-box {
    .rt-top-box {
      font-size: 24px;
      color: @color-font-primary;
      display: flex;
      justify-content: space-between;
      padding: 20px 26px;
      .cn-country {
        padding-left: 30px;
      }
      .rt-influence {
        padding-right: 4px;
      }
      .anticon-star {
        color: #FFC000;
      }
      .anticon-star-o {
        color: @color-ashy;
      }
    }
    .rt-rest-box {
      border: 1px solid @color-ashy;
      background-color: #fff;
      margin: 0 20px;
      padding-left: 2%;
      .rt-descriptor {
        border-bottom: 1px solid @color-ashy;
        font-size: 28px;
        color: @color-font-primary;
        padding: 10px 0;
      }
      .rt-value-box {
        display: flex;
        font-size: 24px;
        padding: 20px 0;
        &.rt-vertical-display {
          flex-direction: column;
          & > div {
            padding-left: 0;
            padding-bottom: 16px;
            &:last-child {
              padding-bottom: 0;
            }
          }
        }
        & > div {
          padding-left: 14%;
          &:first-child {
            padding-left: 0;
          }
        }
        .rt-current {
          color: @color-secondary;
        }
        .rt-expect {
          color: @color-primary;
        }
        .rt-previous {
          color: #F86520;
        }
        .rt-value {
          font-size: 28px;
          padding-left: 16px;
        }
      }
    }
  }
}

.rt-news-page-container {
  flex: 1;
  font-size: 28px;
  color: @color-font-secondary;
  background-color: #fff;
  .rt-news-caption {
    text-align: center;
    font-size: 40px;
    color: @color-font-primary;
    padding: 20px 0;
  }
  .rt-news-datetime {
    text-align: center;
    font-size: 24px;
    padding-bottom: 20px;
  }
  .rt-news-body {
    border-top: 1px solid @color-ashy;
    padding: 0 30px;
    & > p {
      text-indent: 2em;
    }
  }
}

.rt-help-page-container {
  border: 1px solid red;
  flex: 1;
  background-color: @color-background;
  .rt-row-box {
    border-bottom: 1px solid @color-ashy;
    font-size: 28px;
    color: @color-font-primary;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #fff;
    i {
      font-size: 40px;
    }
  }
}

.rt-micro-disc-container {
  flex: 1;
  .rt-account-info-box {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #67BBE9;
    align-items: center;
    padding: 28px 0;
    & > div {
      &:last-child {
        display: flex;
        flex-direction: column;
        padding-left: 10px;
        align-items: flex-start;
        .rt-nickname {
          font-size: 32px;
          color: #fff;
          padding-top: 14px;
        }
      }
    }
    .rt-adjust {
      height: 80px;
      width: 80px;
    }
  }
  .rt-deposite-withdraw-box {
    top: 136px;
    width: 100%;
    position: absolute;
    display: flex;
    background-color: @color-primary;
    font-size: 28px;
    color: #fff;
    & > div {
      &:first-child {
        border-right: 1px solid #67BBE9;
      }
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px 0;
      i {
        font-size: 40px;
      }
    }
  }
  .rt-notice-box {
    top: 222px;
    background-color: @color-background;
    position: absolute;
    // border: 1px solid red;
    width: 100%;
    border-bottom: 1px solid @color-ashy;
    font-size: 24px;
    padding: 20px 0;
    color: @color-font-primary;
    & > span {
      &:first-child {
        background-color: @color-primary;
        padding: 6px 10px;
        border-radius: 8px;
        color: #fff;
        margin-left: 20px;
      }
      &:last-child {
        padding-left: 20px;
      }
    }
  }
  .rt-available-goods-box {
    top: 290px;
    background-color: #fff;
    display: flex;
    position: absolute;
    width: 100%;
    .rt-active-goods {
      border-bottom: 4px solid @color-primary;
      & > span {
        &:first-child {
          color: @color-primary;
        }
        &:nth-child(2) {
          color: @color-red;
        }
      }
      i {
        color: @color-red;
      }
    }
    & > div {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid @color-ashy;
      padding: 20px 0;
      i {
        font-size: 40px;
        color: @color-green;
      }
      & > span {
        &:first-child {
          font-size: 32px;
          color: #6E6E6E;
        }
        &:nth-child(2) {
          font-size: 36px;
          color: @color-green;
          padding-left: 12px;
        }
      }
    }
  }
  .rt-price-statistics-box {
    margin-top: 380px;
    border-bottom: 1px solid @color-ashy;
    font-size: 24px;
    color: #474E5D;
    display: flex;
    justify-content: space-around;
    padding: 15px 0;
  }
  .rt-chart-genre-box {
    border-bottom: 1px solid @color-ashy;
    background-color: #fff;
    display: flex;
    font-size: 24px;
    color: @color-font-primary;
    .rt-genre-active {
      color: @color-primary;
      border-bottom: 1px solid;
    }
    & > span {
      flex: 1;
      text-align: center;
      padding: 10px 0;
    }
  }
  .rt-chart-img {
    border: 1px solid red;
    width: 100%;
    max-width: 99.6%;
  }
  .rt-btn-grp-box {
    border: 1px solid @color-ashy;
    display: flex;
    justify-content: space-between;
    padding: 10px 2%;
    font-size: 28px;
    i {
      font-size: 40px;
    }
    & > div {
      width: 48.5%;
      padding: 20px 0;
      text-align: center;
      border-radius: 8px;
      background-color: @color-green;
      color: #fff;
      &:first-child {
        background-color: @color-red;
      }
    }
  }
  .rt-in-process-order {
    border-bottom: 1px solid @color-ashy;
    font-size: 24px;
    color: @color-font-primary;
    padding: 6px 0 6px 20px;
    background-color: #fff;
  }
  .rt-order-box {
    border-bottom: 1px solid @color-ashy;
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: #fff;
    .rt-up {
      font-size: 24px;
      color: #fff;
      background-color: @color-red;
      flex: 0.8;
      text-align: center;
      padding: 8px 0;
      border-radius: 8px;
      &.rt-down {
        background-color: @color-green;
      }
    }
    .rt-limit-stop {
      font-size: 16px;
      padding-left: 16px;
      color: @color-primary;
      display: flex;
      flex-direction: column;
      flex: 1.5;
      align-items: center;
      span {
        padding-top: 6px;
      }
      &.rt-limit-stop-grey {
        color: #E4E4E4;
      }
    }
    .rt-goods {
      font-size: 24px;
      color: @color-font-primary;
      display: flex;
      flex-direction: column;
      flex: 4;
      text-align: center;
      span:last-child {
        padding-top: 6px;
      }
    }
    .rt-number-visible {
      font-size: 40px;
      color: @color-red;
      flex: 5;
      text-align: center;
      &.rt-another-state {
        color: @color-green;
      }
    }
    .rt-btn {
      font-size: 28px;
      color: #fff;
      background-color: @color-primary;
      flex: 2;
      text-align: center;
      padding: 8px 0;
      border-radius: 8px;
    }
  }
  & > div:nth-last-child(2) {
    margin-bottom: 140px;
  }
}

.rt-account-page-container {
  flex: 1;
  background-color: @color-background;
  .rt-top-box {
    border-bottom: 2px solid @color-ashy;
    font-size: 28px;
    color: @color-font-primary;
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    background-color: #fff;
    .rt-left-box {
      padding-left: 20px;
      display: flex;
      align-items: center;
      .rt-nickname {
        padding-left: 10px;
      }
      .rt-account-name {
        padding-right: 20px;
      }
    }
    .rt-right-box {
      padding-right: 20px;
      display: flex;
      align-items: center;
      i {
        font-size: 40px;
        padding-left: 8px;
      }
    }
  }
  .rt-balance-coupon-box {
    border: 2px solid @color-ashy;
    background-color: #fff;
    padding: 10px 0 20px 0;
    margin-top: 20px;
    .rt-descriptor {
      display: flex;
      font-size: 24px;
      color: #393A3F;
      padding: 16px;
      padding-left: 34px;
      & > span {
        flex: 1;
        &:last-child {
          padding-left: 8px;
        }
      }
    }
    .rt-balance {
      display: flex;
      padding: 16px;
      padding-left: 34px;
      font-size: 32px;
      color: #393A3F;
      & > span {
        flex: 1;
        &:first-child {
          font-size: 48px;
          color: @color-primary;
          font-weight: bold;
        }
        &:last-child {
          padding-left: 8px;
        }
      }
    }
    .rt-btn-grp {
      display: flex;
      padding: 8px;
      justify-content: space-around;
      font-size: 28px;
      i {
        font-size: 40px;
      }
      & > div {
        text-align: center;
        padding: 8px 0;
        width: 47%;
        border-radius: 8px;
        background-color: @color-secondary;
        color: #fff;
        &:first-child {
          background-color: @color-primary;
        }
      }
    }
  }
  .rt-scrollable-container {
    flex: 1;
    overflow: auto;
    & > div:first-child {
      border-top: 2px solid @color-ashy;
    }
    & > div:last-child {
      margin-bottom: 20px;
    }
  }
  .rt-footer-tab-box {
    background-color: @color-secondary;
    font-size: 24px;
    color: #fff;
    display: flex;
    & > div {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px 0;
    }
    .rt-tab-active {
      background-color: @color-primary;
    }
    i {
      font-size: 40px;
    }
  }
}

.rt-ranking-list-container {
  flex: 1;
  overflow: auto;
  .rt-substance-container {
    .rt-row-box {
      background-color: #fff;
      border-bottom: 1px solid @color-ashy;
      display: flex;
      color: @color-font-primary;
      padding: 20px 0;
      .rt-circle {
        padding: 8px 14px;
        border-radius: 50%;
        color: #fff;
        &.rt-first {
          background-color: @color-red;
        }
        &.rt-second {
          background-color: #FF9C32;
        }
        &.rt-third {
          background-color: #FFC000;
        }
      }
      & > span {
        flex: 1;
        text-align: center;
        &:nth-child(2), &:nth-child(4) {
          flex: 2;
        }
      }
    }
  }
}

.rt-position-list-container {
  .rt-account-balance {
    background-color: #fff;
    border-bottom: 2px solid @color-ashy;
    color: @color-font-primary;
    padding: 16px 0 16px 20px;
  }
  .rt-position-title {
    padding: 16px 20px;
    border-bottom: 2px solid @color-ashy;
    // margin-bottom: 6px;
  }
  .rt-scrollable-container {
    flex: 1;
    overflow: auto;
    border: 1px solid red;
    & > div {
      &:first-child {
        margin-top: 6px;
      }
    }
    .rt-position-box {
      border: 2px solid @color-ashy;
      margin: 0 14px 20px;
      background-color: #fff;
      font-size: 24px;
      color: @color-font-primary;
      .rt-top-box {
        border-bottom: 2px solid @color-ashy;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 20px 0;
        .rt-gross-profit {
          color: #F67363;
          font-size: 32px;
          &.rt-nagetive {
            color: @color-green;
          }
        }
        .rt-updown {
          font-size: 24px;
          padding: 8px 10px;
          background-color: @color-red;
          border-radius: 8px;
          margin-left: 10px;
          color: #fff;
          &.rt-down {
            background-color: @color-green;
          }
        }
        & > div {
          font-size: 28px;
          display: flex;
          align-items: center;
        }
      }
      .rt-bottom-box {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 20px 0;
        .rt-operator-btn {
          font-size: 28px;
          color: @color-font-secondary;
          padding: 6px 36px;
          background-color: @color-background;
          border-radius: 8px;
        }
      }
    }
  }
}

.rt-profile-container {
  flex: 1;
  background-color: @color-background;
  .cm-navbar-box {
    position: absolute;
    width: 100%;
    max-width: 99.9%;
    top: 0;
  }
  .cm-margin-top {
    border-top: 1px solid @color-ashy;
    margin-top: 118px !important;
  }
  .rt-row-box {
    border-bottom: 1px solid @color-ashy;
    display: flex;
    justify-content: space-between;
    font-size: 32px;
    padding: 20px;
    background-color: #fff;
    .rt-left-box {
      color: @color-font-primary;
    }
    .rt-right-box {
      color: @color-font-secondary;
      & > img {
        padding-right: 8px;
      }
    }
  }
  .rt-return-btn {
    margin: 4%;
    text-align: center;
    padding: 2%;
    border-radius: 8px;
    font-size: 36px;
    color: #fff;
    background-color: @color-secondary;
  }
}

.rt-recharge-container {
  flex: 1;
  background-color: @color-background;
  .rt-tip-message-box {
    color: #fff;
    background-color: @color-primary;
    padding: 20px 0 14px 34px;
  }
  .rt-balance-box {
    color: @color-font-primary;
    background-color: #fff;
    padding: 16px 0 16px 30px;
  }
  .rt-payment-way-box {
    background-color: #fff;
    border: 1px solid @color-ashy;
    & > div:first-child {
      padding: 10px 0 10px 20px;
    }
    .rt-img-box {
      display: flex;
      padding: 4%;
      justify-content: space-between;
      .rt-active-payment {
        border-color: @color-primary;
        position: relative;
        .cm-right-angle-trangle-box {
          position: absolute;
          right: 0;
          bottom: 0;
          .rt-adjust {
            height: 4px;
            width: 10px;
          }
        }
      }
      & > div {
        border: 1px solid @color-ashy;
        width: 47.5%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 3% 0;
        border-radius: 8px;
      }
    }
  }
  .rt-adjust-addon {
    position: absolute;
    right: 6%;
    top: 24px;
  }
  .rt-next-stop-btn {
    color: #fff;
    background-color: @color-secondary;
    font-size: 36px;
    padding: 3% 0;
    text-align: center;
    margin: 0 4%;
    border-radius: 8px;
  }
  .rt-tip-message {
    font-size: 24px;
    color: @color-font-primary;
    text-align: center;
    padding-top: 20px;
  }
}

.rt-recharge-outcome-container {
  flex: 1;
  background-color: @color-background;
  display: flex;
  flex-direction: column;
  &.rt-diff-bg {
    background-color: #fff;
  }
  .anticon {
    font-size: 156px;
    color: @color-green;
    padding: 80px 0 20px 0;
    &.rt-diff {
      color: @color-red;
    }
  }
  .rt-outcome-text {
    text-align: center;
    font-size: 48px;
    color: @color-font-primary;
  }
  .rt-extra-info {
    border-bottom: 1px solid @color-ashy;
    text-align: center;
    color: @color-font-primary;
    font-size: 34px;
    padding: 10px 0 30px 0;
    &.rt-diff {
      border-bottom: none;
    }
  }
  .rt-row-box {
    border-bottom: 1px solid @color-ashy;
    font-size: 32px;
    color: @color-font-secondary;
    display: flex;
    justify-content: space-between;
    padding: 2% 4%;
    background-color: #fff;
    & > span:first-child {
      color: @color-font-primary;
    }
  }
}

.rt-bankcard-list-container {
  flex: 1;
  background-color: @color-background;
  .rt-bankcard-list-box {
    flex: 1;
    overflow-y: scroll;
    position: relative;
    .rt-bankcard-box {
      border: 2px solid @color-ashy;
      margin: 20px 16px 0;
      display: flex;
      font-size: 28px;
      color: @color-font-secondary;
      justify-content: space-between;
      padding: 20px;
      align-items: center;
      background-color: #fff;
      border-bottom: 12px solid @color-primary;
      .rt-left-box {
        display: flex;
        flex-direction: column;
        .rt-bank-name {
          color: @color-primary;
          font-size: 32px;
          & + span {
            padding: 20px 0;
          }
        }
        & + div {
          border: 2px solid #F1F1F1;
          padding: 14px 28px;
          border-radius: 6px;
          background-color: @color-background;
        }
      }
    }
    .rt-add-bankcard-box {
      margin: 20px 16px;
      color: #C0C0C0;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 26px 0;
      & > span {
        &.rt-plus-sign {
          border: 2px solid @color-ashy;
          font-size: 40px;
          padding: 6px;
          & + span {
            padding-top: 8px;
          }
        }
      }
    }
  }
}

.rt-gift-coupon-container {
  flex: 1;
  background-color: @color-background;
  .rt-gift-coupon-list {
    overflow: auto;
    flex: 1;
    & > div {
      &:first-child {
        margin-top: 25px;
      }
      &:last-child {
        margin-bottom: 50px;
      }
    }
    .rt-gift-coupon {
      margin: 20px 16px 0;
      background-color: @color-primary;
      color: #fff;
      display: flex;
      flex-direction: column;
      padding: 20px;
      border-radius: 8px;
      position: relative;
      overflow: hidden;
      .cm-circle {
        position: absolute;
        left: -20px;
        top: 78px;
        &.rt-right {
          right: -20px;
          left: inherit;
        }
      }
      .rt-title-box {
        font-size: 32px;
        border-bottom: 2px solid rgba(255, 255, 255, .3);
        padding: 20px 0;
      }
      .rt-content-box {
        display: flex;
        padding: 20px 0;
        justify-content: space-between;
        .rt-left-box {
          font-size: 24px;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
        }
        .rt-right-box {
          & > span:first-child {
            font-size: 36px;
            & + span {
              font-size: 72px;
              padding-left: 28px;
            }
          }
        }
      }
      &.rt-has-brought {
        background-color: #fff;
        color: #CBCBCB;
        .rt-title-box {
          border-bottom: 2px solid #F1F1F1;
        }
      }
    }
  }
}

.cm-circle {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background-color: @color-background;
}

.rt-experience-ticket-container {
  background-color: @color-background;
  flex: 1;
  .rt-experience-ticket-list {
    overflow: auto;
    flex: 1;
    & > div {
      &:first-child {
        margin-top: 26px;
      }
    }
    .rt-experience-ticket {
      position: relative; // for purpose of box of absolute
      background-color: @color-primary;
      margin: 0 20px 20px;
      color: #fff;
      border-radius: 8px;
      .rt-title-box {
        font-size: 40px;
        padding: 30px 0 8px 30px;
        border-bottom: 2px solid rgba(255, 255, 255, .3);
      }
      .rt-deadline-box {
        font-size: 24px;
        padding: 30px;
      }
      .cm-left-circle {
        position: absolute;
        left: 0;
        top: 80px;
      }
      .cm-right-circle {
        position: absolute;
        right: 0;
        top: 80px;
      }
      .rt-btn {
        border: 2px solid #68B7F1;
        font-size: 24px;
        padding: 16px 20px;
        position: absolute;
        top: 64px;
        right: 40px;
        border-radius: 8px;
        background-color: @color-primary;
      }
      &.rt-already-used, &.rt-expired, &.rt-already-receive {
        color: #CBCBCB;
        background-color: #fff;
        & > span {
          display: none;
        }
        .rt-title-box {
          border-bottom: 2px solid #F1F1F1;
        }
        .rt-img-box {
          position: absolute;
          top: 10px;
          right: 20px;
          height: 100%;
          width: 25%;
          background-image: url('../../statics/images/already-used.png');
        }
      }
      &.rt-expired {
        .rt-img-box {
          background-image: url('../../statics/images/expired.png');
        }
      }
      &.rt-already-receive {
        .rt-img-box {
          background-image: url('../../statics/images/already-receive.png');
        }
      }
    }
  }
}

.rt-long-press-container {
  flex: 1;
  background-color: @color-background;
  header {
    text-align: center;
    padding: 20px 0;
  }
  .rt-row-box {
    border: 2px solid green;
    color: #555555;
    .rt-above-box {
      font-size: 24px;
      display: flex;
      justify-content: space-between;
      padding: 20px;
      & > span {
        display: flex;
        align-items: center;
      }
      & > div {
        display: flex;
        align-items: center;
        & > span:first-child {
          color: #2799EB;
          font-size: 44px;
          padding-right: 14px;
          font-weight: bold;
        }
      }
    }
    .rt-below-box {
      font-size: 28px;
      display: flex;
      justify-content: flex-end;
      padding: 10px 28px;
      .rt-wrapper {
        border: 1px solid #efefef;
        background-color: #fff;
        width: 70%;
        display: flex;
        text-align: center;
        border-radius: 8px;
        .rt-active {
          background-color: #2799EB;
          color: #fff;
        }
        & > div {
          border-right: 2px solid #efefef;
          flex: 1;
          padding: 20px 0;
          &:first-child {
            border-radius: 8px 0 0 8px;
          }
          &:last-child {
            border-color: transparent;
            border-radius: 0 8px 8px 0;
          }
        }
      }
    }
  }
}

.rt-centification-container {
  .cm-hint-message-box {
    .cm-else {
      color: @color-red;
    }
  }
  .rt-step-descriptor {
    font-size: 24px;
    color: @color-font-primary;
    display: flex;
    justify-content: center;
    padding: 30px 0 15px 0;
    & > span {
      &:nth-child(2) {
        padding: 0 28px;
      }
    }
  }
  .rt-schedule-ui {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 20px;
    .rt-solid-circle {
      height: 30px;
      width: 30px;
      border-radius: 50%;
      display: inline-flex;
      background-color: #CCCCCC;
      &.rt-active {
        background-color: @color-primary;
      }
    }
    .rt-line {
      border-bottom: 4px solid #CCCCCC;
      width: 107px;
      height: 1px;
      display: inline-flex;
      margin: 0 20px;
      &.rt-active {
        border-color: @color-primary;
      }
    }
  }
  .rt-operating-space {
    flex: 1;
    padding-bottom: 40px;
    background-color: #fff;
    overflow: auto;
    .rt-id-card-box {
      border: 2px solid #CCCCCC;
      text-align: center;
      margin: 0 80px 10px;
      &:first-child {
        margin-top: 36px;
      }
      & > div {
        color: #808080;
        &:first-child {
          padding-top: 56px;
        }
        &:nth-child(2) {
          font-size: 40px;
          padding-top: 20px;
        }
      }
      i {
        color: #F1F1F1;
        font-size: 80px;
        padding: 18px 0 40px 0;
      }
    }
    .rt-important-notice {
      color: @color-font-secondary;
      font-size: 24px;
      padding: 0 30px 10px;
      line-height: 1.5;
    }
    .rt-centification-step-two-box {
      & > div:first-child {
        margin-top: 18px;
      }
      .cm-captcha-box {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        .cm-general-input {
          width: 60%;
          margin-bottom: 0;
          margin-right: 0;
        }
        .rt-captcha {
          background-color: @color-primary;
          color: #fff;
          padding: 24px 28px;
          border-radius: 8px;
          margin-left: 10px;
        }
      }
    }
    .rt-submit-success-box {
      text-align: center;
      color: @color-font-primary;
      .cm-row-box {
        border-bottom-width: 2px;
        & > span {
          font-size: 32px;
          &:last-child {
            color: @color-font-secondary;
          }
        }
      }
      i {
        color: @color-green;
        font-size: 100px;
        padding-top: 20px;
        & + div {
          font-size: 48px;
          padding-top: 20px;
          & + div {
            font-size: 34px;
            padding: 10px 0 30px 0;
            border-bottom: 2px solid @color-ashy;
          }
        }
      }
    }
  }
}

// centification page popup
// with the prefix of top- mean top level css
.top-popup-box {
  background-color: #fff;
  color: #505155;
  & > div {
    border-bottom: 2px solid #EFEBE5;
    text-align: center;
    padding: 30px 0;
    &:last-child {
      border-bottom: transparent;
    }
    i {
      color: @color-red;
      font-size: 70px;
    }
  }
}

.rt-centification-info-container {
  .cm-navbar-box + .cm-single-line-box {
    margin-top: 20px;
  }
}

.rt-trade-v2-container {
  .rt-img-box {
    width: 100%;
  }
  .rt-real-time-price {
    border-bottom: 2px solid @color-ashy;
    display: flex;
    background-color: #fff;
    & > div {
      flex: 1;
      text-align: center;
      padding: 20px 0;
      & > span {
        &:first-child {
          font-size: 32px;
          color: #6E6E6E;
          & + span {
            font-size: 36px;
            color: @color-green;
            padding: 0 8px 0 12px;
          }
        }
      }
      i {
        font-size: 32px;
        color: @color-green;
      }
    }
    .rt-active {
      border-bottom: 4px solid @color-primary;
      & > span {
        &:first-child {
          color: @color-primary;
          & + span {
            font-size: 36px;
            color: @color-red;
          }
        }
      }
      i {
        color: @color-red;
      }
    }
  }
  .rt-scrollable-container {
    overflow: auto;
    flex: 1;
    .rt-price-statistics-box {
      border-bottom: 2px solid @color-ashy;
      display: flex;
      justify-content: space-around;
      font-size: 24px;
      color: #474E5D;
      padding: 10px 0;
    }
    .rt-chart-category-box {
      border-bottom: 2px solid @color-ashy;
      background-color: #fff;
      font-size: 24px;
      color: @color-font-primary;
      display: flex;
      text-align: center;
      & > span {
        border-right: 2px solid @color-ashy;
        flex: 1;
        padding: 14px 0;
        &:last-child {
          border-right: transparent;
        }
      }
      .rt-active {
        color: @color-primary;
        border-bottom: 4px solid;
      }
    }
    .rt-img {
      width: 100%;
    }
    .rt-about-user-box {
      border-bottom: 2px solid @color-ashy;
      display: flex;
      font-size: 24px;
      color: @color-font-primary;
      justify-content: space-between;
      padding: 12px 18px;
      i {
        color: @color-primary;
        font-size: 40px;
      }
      .rt-left-box {
        display: flex;
        align-items: center;
        .rt-money {
          color: @color-primary;
          font-size: 28px;
          padding: 0 20px 0 10px;
        }
      }
      .rt-right-box {
        & > :nth-child(2) {
          padding-right: 38px;
        }
      }
    }
    .rt-available-goods-box {
      padding: 10px 2%;
      display: flex;
      justify-content: space-between;
      &.rt-flex-wrap {
        justify-content: flex-start;
        padding: 10px 0;
        flex-wrap: wrap;
        & > div {
          margin-bottom: 10px;
          width: 30%;
          margin-left: 2.5%;
        }
      }
      .rt-goods {
        border: 2px solid @color-ashy;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        width: 32%;
        font-size: 20px;
        color: @color-font-primary;
        text-align: center;
        background-color: #fff;
        padding: 10px 0;
        .rt-middle-text {
          font-size: 32px;
        }
        &.rt-active {
          color: @color-primary;
          border-color: @color-primary;
          position: relative;
          .cm-right-angle-trangle-box {
            position: absolute;
            bottom: -1px;
            right: 0;
            .cm-tick-box {
              height: 6px;
              width: 12px;
            }
          }
        }
      }
    }
    .rt-operate-btn-grp {
      border-bottom: 2px solid @color-ashy;
      display: flex;
      justify-content: space-between;
      padding: 16px 1%;
      & > div {
        color: #fff;
        width: 49%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 15px 0;
        border-radius: 8px;
        i {
          font-size: 40px;
        }
      }
      .rt-left-btn {
        background-color: @color-red;
      }
      .rt-right-btn {
        background-color: @color-green;
      }
    }
    .rt-deal-order-text {
      border-bottom: 2px solid @color-ashy;
      font-size: 24px;
      color: @color-font-primary;
      background-color: #fff;
      padding: 6px 36px;
    }
    .rt-deal-order-box {
      border-bottom: 2px solid @color-ashy;
      display: flex;
      padding: 20px 0;
      background-color: #fff;
      .rt-updown-box {
        // border: 1px solid red;
        flex: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        & > span {
          font-size: 24px;
          color: #fff;
          background-color: @color-red;
          padding: 4px 8px;
          border-radius: 6px;
        }
      }
      .rt-profit-loss-box {
        // border: 1px solid red;
        display: flex;
        flex-direction: column;
        flex: 2;
        justify-content: center;
        align-items: center;
        & > span {
          font-size: 16px;
          color: @color-primary;
        }
      }
      .rt-goods {
        // border: 1px solid red;
        display: flex;
        flex-direction: column;
        flex: 5;
        font-size: 24px;
        color: @color-font-primary;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .rt-delta {
        // border: 1px solid red;
        flex: 6;
        font-size: 40px;
        color: @color-red;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .rt-btn {
        // border: 1px solid red;
        flex: 4;
        display: flex;
        justify-content: center;
        align-items: center;
        & > span {
          background-color: @color-primary;
          color: #fff;
          padding: 6px 36px;
          border-radius: 6px;
        }
      }
    }
  }
  .rt-footer-tab-box {
    background-color: #165073;
    color: #fff;
    font-size: 24px;
    display: flex;
    & > div {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px 0;
      &.rt-active-tab {
        background-color: @color-primary;
      }
      i {
        font-size: 40px;
      }
    }
  }
}

.rt-homepage-v2-container {
  .rt-img {
    width: 100%;
  }
  .rt-scrollable-container {
    .am-input-item {
      margin: 20px 40px 0;
      border-radius: 8px;
      .am-input-label {
        .anticon {
          padding-right: 20px;
        }
      }
      .am-input-control {
        width: 75%;
        input {
          border: 1px solid transparent;
          width: 100%;
        }
      }
    }
    .rt-forget-password-box {
      color: #474E5D;
      text-align: right;
      padding: 20px;
      .rt-exclamatory-mark {
        display: inline-block;
        height: 40px;
        width: 40px;
        border-radius: 50%;
        text-align: center;
        line-height: 40px;
        background-color: @color-primary;
        color: #fff;
        & + span {
          padding-left: 10px;
        }
      }
    }
    .rt-adjust-btn {
      background-color: @color-ashy;
      margin-top: 28px;
      color: #6E6E6E;
    }
  }
}

.rt-historical-transaction-container {
  & > p {
    border-bottom: 2px solid @color-ashy;
    font-size: 24px;
    color: @color-font-primary;
    padding: 10px 30px;
  }
  .rt-title-box {
    font-size: 24px;
    color: @color-font-primary;
    border-bottom: 2px solid @color-ashy;
    display: flex;
    text-align: center;
    align-items: center;
    background-color: #fff;
    padding: 24px 0;
    .rt-date {
      flex: 3;
    }
    .rt-name {
      flex: 4;
    }
    .rt-amount {
      flex: 1.5;
    }
    .rt-direction {
      flex: 1.4;
    }
    .rt-delta {
      flex: 2;
    }
    .rt-placeholder {
      flex: 0.8;
    }
  }
  .rt-scrollable-container {
    flex: 1;
    overflow: auto;
    .rt-transaction-box {
      border-bottom: 2px solid @color-ashy;
      display: flex;
      color: @color-font-primary;
      text-align: center;
      background-color: #fff;
      padding: 16px 0;
      .rt-date {
        flex: 3;
      }
      .rt-name {
        flex: 4;
      }
      .rt-lots {
        flex: 1.5;
      }
      & > div {
        font-size: 24px;
        flex: 1.4;
        display: flex;
        justify-content: center;
        align-items: center;
        span {
          background-color: @color-red;
          color: #fff;
          padding: 6px 10px;
          border-radius: 6px;
          &.rt-green {
            background-color: @color-green;
          }
        }
      }
      .rt-delta {
        color: #F67363;
        // border: 1px solid red;
        flex: 2;
        &.rt-green {
          color: @color-green;
        }
      }
      i {
        flex: 0.8;
        // border: 1px solid red;
        align-self: center;
      }
    }
  }
}

.rt-transaction-modal-container {
  .am-modal-body {
    display: flex;
    flex-direction: column;
    .rt-scrollable-container {
      flex: 1;
      overflow: auto;
      & > :nth-child(1) {
        margin-top: 16px;
      }
      .cm-single-line-box {
        & > span:nth-child(2) {
          font-size: 28px;
        }
        .rt-circle-box {
          border: 2px solid;
          border-radius: 50%;
          height: 44px;
          width: 44px;
          display: flex;
          justify-content: center;
          align-items: center;
          color: @color-font-secondary;
        }
        &.rt-adjust {
          border-bottom: 1px solid transparent;
        }
      }
      .rt-table-box {
        margin: 0 36px;
        .rt-thead-box {
          border-bottom: 2px solid @color-ashy;
          display: flex;
          background-color: #F7F7F7;
          padding: 14px 0;
          & > span {
            flex: 1;
          }
        }
        .rt-tbody-box {
          border-bottom: 2px solid @color-ashy;
          display: flex;
          padding: 14px 0;
          & > span {
            flex: 1;
          }
        }
      }
    }
  }
}

.rt-position-particulars-modal-container {
  .am-modal-body {
    display: flex;
    flex-direction: column;
    .rt-scrollable-container {
      flex: 1;
      overflow: auto;
    }
    .rt-operate-btn {
      background-color: @color-secondary;
      color: #fff;
      font-size: 36px;
      padding: 16px 0;
    }
  }
}

.rt-sure-modal-box {
  width: 90% !important;
  .am-modal-content {
    padding-top: 0 !important;
    .am-modal-header {
      padding: 0;
      background-color: @color-primary;
      padding: 28px 0;
      .am-modal-title {
        font-size: 32px;
        color: #fff;
      }
    }
    .am-modal-body {
      padding: 0 !important;
      .rt-confirmation-box {
        border-bottom: 2px solid @color-ashy;
        display: flex;
        justify-content: space-around;
        color: #393A3F;
        padding: 32px 0;
        & > div {
          display: flex;
          flex-direction: column;
          .rt-small {
            font-size: 24px;
            &.rt-diff {
              color: @color-red;
            }
          }
        }
      }
      .rt-switch-box {
        border-bottom: 1px solid @color-ashy;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 20px;
        & > span {
          color: #393A3F;
        }
      }
    }
    .am-modal-footer {
      .am-modal-button-group-h {
        .am-modal-button {
          font-size: 32px;
          &:first-child {
            color: #393A3F;
            &.am-modal-button-active {
              background-color: #fff;
            }
          }
          &:last-child {
            background-color: @color-primary;
            color: #fff;
          }
        }
      }
    }
  }
}

.rt-reset-password-container {
  .rt-hint-message {
    background-color: @color-primary;
    color: #fff;
    padding: 20px 40px;
  }
  .rt-scrollable-container {
    flex: 1;
    overflow: auto;
    .rt-account-balance {
      background-color: #fff;
      color: @color-font-primary;
      padding: 15px 20px;
      margin-top: 20px;
    }
    .rt-payment-box {
      background-color: #fff;
      margin-top: 20px;
      & > p {
        color: @color-font-primary;
        padding: 10px 20px;
      }
      & > div {
        display: flex;
        flex-wrap: wrap;
        padding: 28px 0;
        .rt-payment-way {
          border: 2px solid @color-ashy;
          width: 44%;
          margin-left: 4%;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 20px 0;
          border-radius: 8px;
          &.rt-active {
            border-color: @color-primary;
            position: relative;
            .cm-right-angle-trangle-box {
              position: absolute;
              right: 0;
              bottom: -1px;
              .cm-tick-box {
                width: 12px;
                height: 6px;
              }
            }
          }
        }
      }
    }
    .am-input-item {
      margin: 36px;
      border-radius: 8px;
      .am-input-control {
        width: 80%;
        input {
          width: 100%;
          border: 1px solid transparent;
        }
      }
    }
    .cm-main-btn {
      margin-bottom: 40px;
    }
  }
}

.rt-deposit-dark-container {
  border: 1px solid red;
  background-color: #161B21 !important;
  .rt-navbar-box {
    border-bottom: 1px solid #393D46;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 40px;
    color: #fff;
    padding: 0 40px;
    & > div {
      border-right: 1px solid #393D46;
    }
    i {
      font-weight: bold;
      padding: 26px 0;
      padding-right: 40px;
    }
  }
  .rt-account-balance {
    text-align: center;
    color: #fff;
    padding: 30px 0;
    background-color: #2B2F38;
    .rt-text {
      font-size: 32px;
      & + div {
        font-size: 64px;
        font-weight: bold;
      }
    }
  }
  & > p.rt-account {
    color: #fff;
    font-size: 32px;
    padding: 12px 40px;
    background-color: #393D46;
  }
  .rt-choose-pay-way {
    color: #C5C9CF;
    padding: 40px;
  }
  .rt-payment-box {
    display: flex;
    flex-wrap: wrap;
    .rt-payment {
      width: 44%;
      margin-left: 4%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      padding: 28px 0;
      margin-bottom: 20px;
      position: relative;
      &.-active {
        border: 8px solid #F86520;
      }
      .cm-right-angle-trangle-box {
        position: absolute;
        bottom: 0;
        right: 0;
        border-bottom-right-radius: 0;
        border-bottom-color: #F86520;
        border-right-color: #F86520;
      }
    }
  }
  .rt-dark-input {
    border: 1px solid #525660;
    margin: 0 32px;
    background-color: #161B21;
    margin-bottom: 40px;
    .am-input-control {
      width: 90%;
      ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        color: #C5C9CF;
      }

      :-moz-placeholder { /* Firefox 18- */
        color: #C5C9CF;
      }

      ::-moz-placeholder {  /* Firefox 19+ */
        color: #C5C9CF;
      }

      :-ms-input-placeholder { /* IE 10+ */
        color: #C5C9CF;
      }
      input {
        width: 90%;
        background-color: #161B21;
        border: 0;
      }
    }
    .am-input-extra {
      color: #C5C9CF;
    }
  }
  .rt-op-btn {
    margin: 0 20px;
    text-align: center;
    font-size: 36px;
    color: #fff;
    padding: 20px 0;
    background-color: #DC504C;
  }
}

.rt-trade-v3-container {
  background-color: #000000 !important;
  // flexbox
  display: flex;
  flex-direction: column;
  .rt-trade-header-box {
    background-color: #161B21;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 10px 20px 20px;
    .rt-left {
      color: #fff;
      display: flex;
      align-items: center;
      span {
        font-size: 24px;
        padding-left: 14px;
        padding-right: 8px;
      }
      strong {
        font-size: 28px;
        padding-right: 25px;
      }
    }
    .rt-right {
      display: flex;
      font-size: 24px;
      color: #000000;
      & > div {
        background-color: #E6BC4B;
        padding: 8px 16px;
        border-radius: 4px;
        &:first-child {
          margin-right: 20px;
        }
      }
    }
  }
  .rt-goods-tabs {
    border: 2px solid #161B21;
    display: flex;
    .rt-tab {
      flex: 1;
      text-align: center;
      font-size: 28px;
      padding: 30px 0;
      &.-active {
        border-bottom: 4px solid #E6BC4B;
      }
      .rt-goods-name {
        color: #E6BC4B;
        & + span {
          color: #F81602;
          padding-left: 14px;
          padding-right: 10px;
          &.-diff {
            color: #1EBC34;
          }
        }
      }
      i {
        color: #F81602;
        &.-down {
          color: #1EBC34;
        }
      }
    }
  }
  .rt-market-price-box {
    font-size: 24px;
    color: #858A90;
    display: flex;
    padding: 15px 0;
    & > span {
      text-align: center;
      flex: 1;
    }
  }
  .rt-scrollable-container {
    flex: 1;
    overflow: auto;
    padding-bottom: 20px;
  }
  .rt-chat-genre-box {
    font-size: 24px;
    color: #858A90;
    display: flex;
    & > span {
      text-align: center;
      flex: 1;
      padding: 15px 0;
    }
    .-active {
      color: #E6BC4B;
      border-bottom: 2px solid;
    }
    background-color: #161B21;
  }
  .rt-chart-img {
    width: 100%;
  }
  .rt-available-goods-box {
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;
    .rt-goods {
      font-size: 20px;
      color: #858A90;
      width: 30%;
      margin-left: 2.5%;
      background-color: #20242B;
      margin-bottom: 20px;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px 0;
      position: relative;
      &.-active {
        background-color: #E6BC4B;
        color: #000000;
        .rt-middle-text {
          color: #000;
        }
      }
      .rt-middle-text {
        color: #C5C9CF;
        font-size: 32px;
      }
      .cm-right-angle-trangle-box {
        position: absolute;
        bottom: 2px;
        right: 2px;
        border-bottom-color: #000;
        border-right-color: #000;
        .cm-tick-box {
          border-color: #E6BC4B;
          width: 12px;
          height: 6px;
        }
      }
    }
  }
  .rt-operte-btn-group {
    color: #fff;
    font-size: 28px;
    display: flex;
    & > div {
      width: 47%;
      margin-left: 2%;
      text-align: center;
      padding: 20px 0;
      background-color: #1EBC34;
      border-radius: 8px;
      &.-red {
        background-color: #F81602;
      }
    }
  }
  .rt-percentage-box {
    display: flex;
    padding: 0 3%;
    font-size: 24px;
    align-items: center;
    padding: 10px 30px;
    & > div {
      flex: 1;
      text-align: center;
    }
    .rt-color-red {
      color: #F81602;
    }
    .rt-color-green {
      color: #1EBC34;
    }
  }
  .rt-progress-bar-box {
    display: flex;
    padding: 0 18px;
    @bar-height: 11px;
    & > div {
      height: @bar-height;
    }
    .rt-bar-red {
      flex: 1;
      background-color: #F81602;
      border-radius: @bar-height 0 0 @bar-height;
    }
    .rt-bar-green {
      flex: 3;
      background-color: #1EBC34;
      border-radius: 0 @bar-height @bar-height 0;
    }
  }
  .rt-order-table-title {
    font-size: 24px;
    color: #858A90;
    padding: 10px 0 10px 20px;
    background-color: #161B21;
  }
  .rt-order-box {
    display: flex;
    padding: 20px 0;
    border-bottom: 2px solid #161B21;
    & > div {
      flex: 1;
    }
    .rt-goods-info {
      font-size: 24px;
      color: #C5C9CF;
      display: flex;
      justify-content: center;
      align-items: center;
      .rt-wrapper {
        display: flex;
        flex-direction: column;
      }
    }
    .rt-delta-box {
      flex: 1.2;
      display: flex;
      align-items: center;
      & > span {
        font-size: 24px;
        background-color: #F81602;
        color: #fff;
        padding: 8px 15px;
        border-radius: 6px;
        margin-right: 20px;
      }
      & > div {
        font-size: 20px;
        display: flex;
        flex-direction: column;
        color: #fff;
        .rt-percentage-number {
          color: #E6BC4B;
        }
      }
    }
    .rt-center {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #F55151;
      font-size: 40px;
      .rt-btn {
        color: #000;
        font-size: 28px;
        background-color: #E6BC4B;
        border-radius: 6px;
        padding: 12px 36px;
      }
    }
  }
  .rt-rest-time {
    color: #BABFC5;
    font-size: 24px;
    padding: 10px 0 10px 28px;
  }
  .rt-dynamic-progress-bar {
    display: flex;
    padding: 10px 28px;
    & > div {
      height: 8px;
    }
    .-active {
      flex: 2.1;
      background-color: #E6BC4B;
      position: relative;
      i {
        color: #E6BC4B;
        position: absolute;
        right: -14px;
        top: -22px;
      }
    }
    .-dis-active {
      flex: 1;
      background-color: #20242B;
    }
  }
  .rt-footer-tab {
    display: flex;
    font-size: 24px;
    background-color: #161B21;
    & > div {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px 0;
      &.-highlight {
        color: #E5BB4B;
      }
    }
    i {
      font-size: 43px;
    }
  }
}

.rt-account-page-v3-container {
  background-color: #000000 !important;
  .rt-account-header {
    background-color: #161B21;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid rgba(239, 239, 239, .1);
    padding: 18px 46px 18px 20px;
    .rt-left {
      display: flex;
      align-items: center;
      span {
        color: #fff;
        font-size: 28px;
        padding: 0 34px 0 20px;
      }
    }
  }
  .rt-grid-box {
    display: flex;
    flex-wrap: wrap;
    padding-top: 20px;
    & > div {
      &:nth-child(1), &:nth-child(2), &:nth-child(3) {
        border-top: 2px solid #20242B;
      }
      &:nth-child(3n) {
        border-right: 2px solid transparent;
      }
    }
    & > div {
      padding: 32px 0;
      border-bottom: 2px solid #20242B;
      border-right: 2px solid #20242B;
      width: 33.33%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #161B21;
      span {
        color: #C5C9CF;
        font-size: 32px;
        padding-top: 20px;
      }
      i {
        color: #fff;
        font-size: 53px;
      }
      &.-highlight {
        background-color: #E6BC4B;
        span, i {
          color: #000;
        }
      }
      &.-active {
        span, i {
          color: #E5BB4B;
        }
      }
    }
  }
}

.rt-gift-coupon-v3-container {
  background-color: #000 !important;
  .rt-top-header {
    color: #fff;
    display: flex;
    align-items: center;
    background-color: #161B21;
    span {
      flex: 1;
      font-size: 32px;
      text-align: center;
      padding-right: 52px;
    }
    i {
      padding: 28px 0;
      padding-left: 48px;
      padding-right: 18px;
      font-size: 48px;
      font-weight: bold;
    }
  }
  .rt-info-message {
    border-bottom: 2px solid rgba(239, 239, 239, .2);
    font-size: 28px;
    display: flex;
    justify-content: space-between;
    padding: 12px 38px;
    .rt-balance {
      color: #fff;
      & + span {
        color: #FFBF26;
      }
    }
    & + div {
      margin-top: 20px;
    }
  }
  .rt-gift-coupon {
    border: 1px solid red;
    margin: 0 20px 20px;
    background-color: #E52722;
    border-radius: 8px;
    position: relative;
    &.-grey {
      @couponGreyColor: #5F646E;
      background-color: #20242B;
      border: 2px solid #393D46;
      .-semi-left {
        //
      }
      .-semi-right {
        //
      }
      .rt-title-box {
        color: @couponGreyColor;
      }
      .rt-left > span {
        color: @couponGreyColor;
      }
      .rt-right {
        span, strong {
          color: @couponGreyColor;
        }
      }
    }
    .cm-circle {
      position: absolute;
      top: 79px;
      &.-semi-left {
        left: -15px;
      }
      &.-semi-right {
        right: -15px;
      }
    }
    .rt-title-box {
      font-size: 32px;
      color: #fff;
      padding: 22px 0 22px 22px;
      border-bottom: 2px solid rgba(239, 239, 239, .2);
    }
    .rt-content-box {
      display: flex;
      justify-content: space-between;
      padding: 0 42px 0 34px;
      .rt-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 24px;
        color: #C5C9CF;
      }
      .rt-right {
        color: #fff;
        padding-top: 10px;
        span {
          font-size: 36px;
        }
        strong {
          font-size: 72px;
          padding-left: 30px;
        }
      }
    }
  }
}

.rt-auth-v3-contianer {
  background-color: #000000 !important; // test in the production there will not need the !important
  .rt-top-header {
    color: #fff;
    font-size: 32px;
    display: flex;
    align-items: center;
    background-color: #161B21;
    // border-bottom: 2px solid #95989A;
    i {
      padding: 28px 48px;
      font-size: 36px;
    }
    span {
      flex: 1;
      text-align: center;
      padding-right: 48px;
    }
  }
  .rt-row-box {
    border-bottom: 2px solid #393D46;
    font-size: 34px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 42px;
  }
}

.rt-gift-coupon-v4-container {
  background-color: #F0F0F0 !important;
  .cm-scrollable-container {
    margin-top: 28px;
  }
  .-top-nav-header {
    border-bottom: 2px solid #EFEFEF;
    display: flex;
    align-items: center;
    background-color: #fff;
    i {
      padding: 34px 48px;
      align-self: stretch;
      display: flex;
      align-items: center;
      font-size: 34px;
    }
    span {
      font-size: 32px;
      color: #1A1A1A;
      flex: 1;
      text-align: center;
      padding-right: 67px;
    }
  }
  .-info-box {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28px;
    color: #555555;
    padding: 0 36px;
    background-color: #fff;
    .-diff {
      color: #F55151;
    }
  }
  .-row-box {
    height: 182px;
    margin: 0 20px 22px;
    display: flex;
    justify-content: space-between;
    &.-inaction {
      .-half-box {
        background-color: #fff;
        color: #CBCBCB;
        .-above {
          border-bottom-color: rgba(203, 203, 203, .3);
        }
      }
    }
    .-half-box {
      width: 49%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background-color: #F55151;
      border-radius: 6px;
      color: #fff;
      position: relative;
      box-sizing: border-box;
      &::before {
        box-sizing: border-box;
        background-color: #F0F0F0;
        height: 40px;
        width: 20px;
        border-radius: 0 40px 40px 0;
        position: absolute;
        top: 70px;
        content: '';
        left: -2px;
      }
      &::after {
        box-sizing: border-box;
        background-color: #F0F0F0;
        height: 40px;
        width: 20px;
        border-radius: 40px 0 0 40px;
        position: absolute;
        top: 70px;
        right: -2px;
        content: '';
        box-sizing: border-box;
      }
      section {
        flex: 1;
        display: flex;
      }
      .-above {
        flex-direction: column;
        justify-content: center;
        padding-left: 22px;
        border-bottom: 2px solid rgba(255, 255, 255, .3);
        .-expired {
          font-size: 24px;
        }
      }
      .-below {
        justify-content: flex-end;
        align-items: center;
        font-size: 30px;
        padding-right: 34px;
        .-money {
          font-size: 58px;
        }
      }
    }
  }
}